<template>
  <div class="talk">
    <button @click="getLoveTalk">获取一句土味情话</button>
    <ul>
      <li v-for="item in talkStore.loveTalk" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import axios from 'axios';
// 引入一个自动生成id的工具 npm i nanoid
import { nanoid } from 'nanoid';
import { useTalkStore } from '@/store/lovetalk';
const talkStore=useTalkStore()
// 修改的方式一
async function getLoveTalk(){

  let talk=await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")
  console.log(talk)
  let {data:{content:title}}=talk
  console.log(title)
  console.log(nanoid());
  talkStore.loveTalk.unshift({id:nanoid(),title})
 

}

</script>

<style scoped>
.talk{
    background-color: lightsalmon;
    border-radius: 6px;
    box-shadow: 6px 6px 12px gray;
    padding: 10px;

}
.talk *{
    margin: 10px;
}


</style>